{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-80px {
		width: 80px;
	}

	.el-collapse {
		border: 0;
	}

	.el-collapse-item__header {
		border: 0;
	}

	.el-collapse-item__wrap {
		border: 0;
	}

	.border-lg {
		border-width: 2px !important;
	}

	.setting-item .setting-item-del {
		display: none;
	}

	.setting-item:hover .setting-item-del {
		display: block;
	}

	#user_agreement,
	#privacy {
		line-height: 1;
		width: 800px;
	}

	.cid-title {
		font-size: .8rem;
		font-weight: bold;
	}
</style>
{/block}
{block name="body"}
<div class="bg-white px-3 pb-3">
	<div class="mb-3">
		<el-tabs v-model="activeName">
			<el-tab-pane label="百度百聘" name="xy_baidu_zhaopin"></el-tab-pane>
		</el-tabs>
	</div>
	<el-form label-width="200px" :label-position="labelPosition" @submit.native.prevent="return;" v-loading="loading">
		<div v-for="(item,i) in list">
			<el-form-item v-for="(v,index) in item" :label="v.title" class="setting-item"
				v-show="formItemShow.indexOf(v.ctype+'.'+v.key)>-1">
				<div class="setting-item-body flex flex-center">
					<div v-if="v.type==='input'" class="px-3 flex-1">
						<el-input class="col-4 px-0" :class="getInputCol(v.value)" v-model="v.value"
							@change="editConfig(v)"></el-input>
						<div class="text-muted small" v-if="v.tips">
							<el-popover placement="top-start" width="300" trigger="click" :content="v.ctype+'.'+v.key">
								<div slot="reference" v-html="warningIcon+v.tips"></div>
							</el-popover>
						</div>
					</div>
				</div>
			</el-form-item>
		</div>

		<el-form-item class="setting-item">
			<div class="setting-item-body px-3">
				<el-button type="primary" :loading="loading" @click="submitConfig">保存</el-button>
			</div>
		</el-form-item>
	</el-form>
</div>
<div class="bg-white px-3 pb-3">
	<div class="p-3 mt-3 bg">
		<div class="p-2 border-bottom">XML文件</div>
		<div class="row pl-4">
			<div class="col-6 col-lg-6 text-secondary p-2"><span>文件链接</span></div>
			<div class="col-4 col-lg-4 text-secondary p-2"><span>修改时间</span></div>
			<div class="col-4 col-lg-2 text-secondary p-2">
				<el-button type="primary" @click="generateBaiduBaipinXml()" size="mini">生成XML</el-button>
			</div>
		</div>
		{volist name="fileList" id="item"}
		<div class="row pl-4">
			<div class="col-6 col-lg-6 text-secondary p-2"><span class="text-primary">{:config('web.url')}/{$item.spath}</span></div>
			<div class="col-4 col-lg-4 text-secondary p-2"><span class="text-primary">{$item.filemtime|date="Y-m-d H:i:s"}</span></div>
		</div>
		{/volist}
	</div>
</div>
{/block}
{block name="script"}
<script>
	var list = {:json_encode($Data, JSON_UNESCAPED_UNICODE)};
	console.log(list);
	var formItemShow = [];
	for (var x in list) {
		for (var i in list[x]) {
			formItemShow.push(list[x][i].ctype + '.' + list[x][i].key);
		}
	}
</script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			view: XYBase.view,
			activeName: '{$ctype}',
			labelPosition: 'right',
			warningIcon: '<i class="el-icon-warning-outline mr-1 text-primary"></i>',
			loading: false,
			inputVisible: false,
			inputValue: '',
			WaitingSubmit: [],
			formItemShow: [],
			list: list
		},
		watch: {
			view: XYBase.viewWatch,
			activeName(val, oldVal) {
				this.setFormItemShow(val, oldVal);
			}
		},
		created() {
			XYBase.created(this);
			this.setFormItemShow(this.activeName);
		},
		methods: {
			setFormItemShow(val, oldVal) {
				switch (val) {
					case 'xy_baidu_zhaopin':
						this.formItemShow = ["xy_baidu_zhaopin.xml_path"];
						break;
				}
			},
			handleClose(val, tag) {
				val.value.splice(val.value.indexOf(tag), 1);
				this.editConfig(val);
			},
			showInput() {
				this.inputVisible = true;
				this.$nextTick(_ => {
					this.$refs.saveTagInput[0].$refs.input.focus();
				});
			},
			handleInputConfirm(val) {
				let inputValue = this.inputValue;
				if (inputValue) {
					val.value.push(inputValue);
				}
				this.inputVisible = false;
				this.inputValue = '';
				this.editConfig(val);
			},
			getInputCol(val) {
				return 'w-480px';
				var cla = '';
				if (!val) return 'col-sm-2';
				switch (true) {
					case val.length > 200:
						cla = 'col-sm-12';
						break;
					case val.length > 180:
						cla = 'col-sm-11';
						break;
					case val.length > 160:
						cla = 'col-sm-10';
						break;
					case val.length > 140:
						cla = 'col-sm-9';
						break;
					case val.length > 120:
						cla = 'col-sm-8';
						break;
					case val.length > 100:
						cla = 'col-sm-7';
						break;
					case val.length > 80:
						cla = 'col-sm-6';
						break;
					case val.length > 60:
						cla = 'col-sm-5';
						break;
					case val.length > 40:
						cla = 'col-sm-4';
						break;
					case val.length > 20:
						cla = 'col-sm-3';
						break;
					default:
						cla = 'col-sm-2';
						break;
				}
				return cla;
			},
			handleAvatarSuccess: function (res, file) {
				if (res) {
					if (res.code === 0) {
						if (res.data.type == 'web/img') {
							if (this.list[res.data.ctype] && this.list[res.data.ctype][res.data.index] && this.list[res.data.ctype][res.data.index].id == res.data.id) {
								this.list[res.data.ctype][res.data.index].value = res.data.path;
								this.list[res.data.ctype][res.data.index].url = res.data.url;
								this.editConfig(this.list[res.data.ctype][res.data.index]);
							}
						} else if (res.data.type == 'publics/files') {
							if (this.list[res.data.ctype] && this.list[res.data.ctype][res.data.index] && this.list[res.data.ctype][res.data.index].id == res.data.id) {
								this.list[res.data.ctype][res.data.index].value = res.data.path;
								this.editConfig(this.list[res.data.ctype][res.data.index]);
							}
						}
						XYBase.success(res.msg);
					} else { XYBase.error(res.msg); }
				} else { XYBase.error(XYBase.config.system_network_error) }
			},
			handleAvatarError: function (res, file) {
				XYBase.error(XYBase.config.system_network_error)
			},
			beforeAvatarUpload: function (file) {
				const isJPGPNG = XYBase.config.imageMime.indexOf(file.type) >= 0;
				const isLt10M = file.size / 1024 <= 10240;

				if (!isJPGPNG) {
					XYBase.error('缩略图只能是PNG格式');
					return false;
				}
				if (!isLt10M) {
					XYBase.error('缩略图大小不能超过 10M!');
					return false;
				}
				return isJPGPNG && isLt10M;
			},
			editConfig(val) {
				var isBreak = true;
				for (var i = 0; i < this.WaitingSubmit.length; i++) {
					if (this.WaitingSubmit[i].ctype == val.ctype && this.WaitingSubmit[i].key == val.key) {
						this.WaitingSubmit[i] = val;
						isBreak = false;
						break;
					}
				}
				if (isBreak)
					this.WaitingSubmit.push(val);
			},
			submitConfig() {
				if (this.WaitingSubmit.length) {
					this.submitConfigAjax();
				} else {
					return XYBase.success('保存成功');
				}
			},
			submitConfigAjax() {
				var _this = this;
				var val = this.WaitingSubmit[0];
				if (!val) return XYBase.success('保存成功');
				_this.loading = true;
				$.ajax({
					url: '/setting/edit',
					data: val,
					type: 'post',
					dataType: 'json',
					success: function (ret) {
						_this.loading = false;
						if (ret) {
							if (ret.code == 0) {
								_this.WaitingSubmit.splice(0, 1);
							}
							_this.submitConfigAjax();
						} else {
							XYBase.error(XYBase.config.system_network_error);
						}
					},
					error: function (err) {
						_this.loading = false;
						XYBase.error(XYBase.config.system_network_error);
					}
				});
			},
			saveArticle: function (formName) {
				var D = this.article;
				for (var x in D) {
					switch (x) {
						case 'user_agreement':
							if (!D[x]) break;
							D[x].content = ueUA.getContent();
							this.sendSaveArticle(D[x]);
							break;
						case 'privacy':
							if (!D[x]) break;
							D[x].content = ueP.getContent();
							this.sendSaveArticle(D[x]);
							break;
					}
				}
				setTimeout('window.location.reload()', 1500);
			},
			sendSaveArticle(data) {
				var _this = this;
				console.log(data);
				const loading = XYBase.openloading();
				$.ajax({
					url: '/editArticle/' + data.id,
					data: data,
					type: 'post',
					dataType: 'json',
					success(ret) {
						loading.close();
						if (ret) {
							if (ret.code == 0) {
								XYBase.success(ret.msg);
							} else {
								XYBase.msg(ret.msg);
							}
						} else {
							XYBase.error(XYBase.config.system_network_error)
						}
					},
					error(err) {
						loading.close();
						XYBase.error(XYBase.config.system_network_error)
					}
				});
			},
			generateBaiduBaipinXml() {
				const loading = XYBase.openloading();
				$.ajax({
					url: "/generateBaiduBaipinXml",
					type: "POST",
					success(res) {
						loading.close();
						if (res) {
							if (res.code == 0) {
								XYBase.success(res.msg);
								setTimeout(() => {
									location.reload();
								}, 1000);
							} else {
								XYBase.msg(res.msg);
							}
						} else {
							XYBase.error(XYBase.config.system_network_error)
						}
					},
					error(err) {
						loading.close();
						XYBase.error(XYBase.config.system_network_error)
					}
				})
			}
		}
	});
	$(function () {
		reloadWindowSize();
		$(window).resize(function () {
			reloadWindowSize();
		});
	});
	function reloadWindowSize(argument) {
		var winW = $(window).width();
		if (winW <= 576) {
			vm.labelPosition = 'top';
		} else {
			vm.labelPosition = 'right';
		}
	}
	window.onbeforeunload = function (e) {
		if (vm.WaitingSubmit.length) {
			vm.$confirm('有配置还未保存，确定离开当前页面吗？', '提示', {
				confirmButtonText: '保存',
				cancelButtonText: '不保存',
				type: 'warning'
			}).then(() => {
				vm.submitConfig();
			}).catch(action => {
				if (action == 'cancel') {
					vm.WaitingSubmit.length = [];
					XYBase.msg('已放弃保存');
				} else {
					XYBase.msg('已取消');
				}
			});
			var e = window.event || e;
			e.returnValue = ("确定离开当前页面吗？");
		}
	}
</script>
{/block}